<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 考试详情</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --teacher-accent: #4361ee;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        .main-content {
            flex: 1;
            padding: 2rem 0;
        }

        .page-header {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background-color: var(--teacher-accent);
        }

        .detail-card {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .detail-header {
            padding: 1.25rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .detail-body {
            padding: 1.25rem;
        }

        .question-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .student-record {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .status-not-started {
            background-color: #e3f2fd;
            color: #1976d2;
        }

        .status-in-progress {
            background-color: #fff3e0;
            color: #f57c00;
        }

        .status-completed {
            background-color: #e8f5e9;
            color: #388e3c;
        }

        .footer {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 2rem 0;
            margin-top: auto;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand" href="/teacher/home">
            <i class="fas fa-chalkboard-teacher"></i>在线考试系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/home/manage"><i class="fas fa-home"></i> 主页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/exam/manage"><i class="fas fa-tasks"></i> 考试管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/teacher/question/manage"><i class="fas fa-book"></i> 题库管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/teacher/score/analysis"><i class="fas fa-chart-bar"></i> 成绩分析</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主内容区域 -->
<div class="main-content">
    <div class="container">
        <!-- 考试基本信息 -->
        <div class="page-header">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="mb-0" th:text="${exam.examName}">考试名称</h2>
                    <p class="text-muted mb-0">
                        <span th:text="${exam.courseName}">课程名称</span> | 
                        <span th:text="${exam.examType}">考试类型</span>
                    </p>
                </div>
                <div th:class="${'status-badge ' + 
                    (exam.status == 0 ? 'status-not-started' : 
                     exam.status == 1 ? 'status-in-progress' : 'status-completed')}"
                     th:text="${exam.status == 0 ? '未开始' : 
                             exam.status == 1 ? '进行中' : '已结束'}">
                    状态
                </div>
            </div>
        </div>

        <!-- 数据大屏区域 -->
        <div class="detail-card mb-4" id="question-stat-board">
            <div class="detail-header">
                <h4 class="mb-0">答题数据大屏</h4>
            </div>
            <div class="detail-body">
                <div id="stat-charts" class="row g-3"></div>
            </div>
        </div>

        <!-- 考试详情 -->
        <div class="row">
            <!-- 考试信息 -->
            <div class="col-md-4">
                <div class="detail-card">
                    <div class="detail-header">
                        <h4 class="mb-0">考试信息</h4>
                    </div>
                    <div class="detail-body">
                        <div class="mb-3">
                            <p class="mb-1"><i class="fas fa-clock me-2"></i>考试时长</p>
                            <strong th:text="${exam.duration + '分钟'}">120分钟</strong>
                        </div>
                        <div class="mb-3">
                            <p class="mb-1"><i class="fas fa-calendar me-2"></i>开始时间</p>
                            <strong th:text="${#temporals.format(exam.startTime, 'yyyy-MM-dd HH:mm')}">2025-06-10 09:00</strong>
                        </div>
                        <div class="mb-3">
                            <p class="mb-1"><i class="fas fa-calendar-check me-2"></i>结束时间</p>
                            <strong th:text="${#temporals.format(exam.endTime, 'yyyy-MM-dd HH:mm')}">2025-06-10 11:00</strong>
                        </div>
                        <div class="mb-3">
                            <p class="mb-1"><i class="fas fa-star me-2"></i>总分</p>
                            <strong th:text="${exam.totalScore + '分'}">100分</strong>
                        </div>
                        <div>
                            <p class="mb-1"><i class="fas fa-user me-2"></i>创建教师</p>
                            <strong th:text="${exam.teacherName}">张老师</strong>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 试题列表 -->
            <div class="col-md-8">
                <div class="detail-card">
                    <div class="detail-header">
                        <h4 class="mb-0">试题列表</h4>
                    </div>
                    <div class="detail-body">
                        <div class="question-card" th:each="question, iterStat : ${questions}">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="mb-0">
                                    <span th:text="${iterStat.count + '.'}">1.</span>
                                    <span th:text="${question.content}">题目内容</span>
                                </h5>
                                <span class="badge bg-primary" th:text="${question.score + '分'}">5分</span>
                            </div>
                            <div th:if="${question.type == 'choice'}" class="options">
                                <div th:each="option : ${question.options}" class="form-check">
                                    <input class="form-check-input" type="radio" disabled>
                                    <label class="form-check-label" th:text="${option}">选项内容</label>
                                </div>
                            </div>
                            <div class="mt-2">
                                <small class="text-muted">参考答案：</small>
                                <span th:text="${question.answer}">答案内容</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 考试记录 -->
                <div class="detail-card mt-4">
                    <div class="detail-header">
                        <h4 class="mb-0">考试记录</h4>
                    </div>
                    <div class="detail-body">
                        <div class="student-record" th:each="record : ${records}">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-1" th:text="${record.studentName}">学生姓名</h5>
                                    <p class="text-muted mb-0" th:text="${record.className}">班级名称</p>
                                </div>
                                <div>
                                    <span class="badge" th:class="${record.status == 0 ? 'bg-secondary' : 
                                                                   record.status == 1 ? 'bg-warning' : 'bg-success'}"
                                           th:text="${record.status == 0 ? '未考试' : 
                                                   record.status == 1 ? '考试中' : '已提交'}">
                                        状态
                                    </span>
                                    <span class="ms-2" th:if="${record.totalScore != null}" 
                                          th:text="${record.totalScore + '分'}">90分</span>
                                </div>
                            </div>
                            <div class="mt-2">
                                <small class="text-muted">开始时间：</small>
                                <span th:text="${record.startTime != null ? #temporals.format(record.startTime, 'yyyy-MM-dd HH:mm') : '未开始'}">
                                    2025-06-10 09:00
                                </span>
                                <small class="text-muted ms-3">提交时间：</small>
                                <span th:text="${record.submitTime != null ? #temporals.format(record.submitTime, 'yyyy-MM-dd HH:mm') : '未提交'}">
                                    2025-06-10 11:00
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="footer">
    <div class="container text-center py-4">
        <a href="https://gitee.com/sorrymaker04/onlineexam-workload" target="_blank"><i class="fab fa-github fa-2x"></i></a>
        <div class="copyright mt-2">
            &copy; 2025 版权所有 北城在线考试系统小组 12 Team
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/echarts.min.js"></script>
<script th:inline="javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var examId = /*[[${exam.examId}]]*/ '1';
        fetch('/exam/api/question-stat/' + examId)
            .then(res => res.json())
            .then(data => {
                renderStatCharts(data.questions);
            });

        function renderStatCharts(questions) {
            const statCharts = document.getElementById('stat-charts');
            statCharts.innerHTML = '';
            questions.forEach((q, idx) => {
                // 创建外层卡片
                const colDiv = document.createElement('div');
                colDiv.className = 'col-12 col-md-6 col-lg-4';
                // 卡片
                const card = document.createElement('div');
                card.className = 'shadow-sm rounded bg-white p-3 h-100 d-flex flex-column';
                card.style.minHeight = '260px';
                // 题目内容
                const title = document.createElement('div');
                title.className = 'fw-semibold mb-2 text-truncate';
                title.title = q.content;
                title.style.fontSize = '15px';
                title.innerText = (idx+1) + '. ' + q.content;
                card.appendChild(title);
                // 图表容器
                const chartDiv = document.createElement('div');
                chartDiv.style.width = '100%';
                chartDiv.style.height = '180px';
                chartDiv.id = 'stat-chart-' + q.question_id;
                card.appendChild(chartDiv);
                // 选项标签或正确率
                const infoDiv = document.createElement('div');
                infoDiv.className = 'mt-2 small text-muted';
                if(q.type === 'choice') {
                    let options = [];
                    try { options = JSON.parse(q.options); } catch(e) { options = []; }
                    infoDiv.innerText = '选项：' + options.join('、');
                } else {
                    let total = (q.correctCount||0) + (q.wrongCount||0);
                    let rate = total ? Math.round((q.correctCount||0)*100/total) : 0;
                    infoDiv.innerText = '正确率：' + rate + '%';
                }
                card.appendChild(infoDiv);
                colDiv.appendChild(card);
                statCharts.appendChild(colDiv);
                // 渲染ECharts
                setTimeout(()=>{
                    var chart = echarts.init(chartDiv);
                    let option;
                    if (q.type === 'choice') {
                        let options = [];
                        try { options = JSON.parse(q.options); } catch(e) { options = []; }
                        option = {
                            tooltip: {},
                            grid: { top: 20, bottom: 30, left: 40, right: 20 },
                            xAxis: { type: 'category', data: options, axisLabel: { fontSize: 12 } },
                            yAxis: { type: 'value', minInterval: 1 },
                            series: [{
                                name: '选择人数',
                                type: 'bar',
                                data: (q.optionStats || []),
                                itemStyle: { color: '#4361ee', borderRadius: [4,4,0,0] }
                            }]
                        };
                    } else {
                        option = {
                            tooltip: { trigger: 'item' },
                            series: [{
                                name: '答题情况',
                                type: 'pie',
                                radius: ['55%', '75%'],
                                avoidLabelOverlap: false,
                                label: { show: true, position: 'center', formatter: '{b}\n{d}%' },
                                data: [
                                    { value: q.correctCount, name: '答对' },
                                    { value: q.wrongCount, name: '答错' }
                                ]
                            }]
                        };
                    }
                    chart.setOption(option);
                }, 0);
            });
        }
    });
</script>
</body>
</html> 